<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <h2>演示vue3双向绑定原理-proxy</h2>
        <input type="text" id="inp">
        <span id="txt"></span>
    </div>
</body>
<script>
    const inp = document.querySelector('#inp')

    const obj = {}

    const p = new Proxy(obj, {
        //获取值
        get(target, key, receive) {
            console.log('获取：', target[key])
            return target[key]
        },
        //设置值
        set(target, key, value, receive) {
            console.log('key:', key)

            target[key] = value;
            document.querySelector('#txt').textContent = target[key]
        }

    })



    //监听输入的输入
    inp.addEventListener('keyup', function(e) {
        p['aa'] = e.target.value

    }, false)
</script>

</html>